<template>
	<view class="workOrderStatistics">
		<!-- 导航 -->
		<view class="goback">
			<view class="arrowleft" @click="backHandle"> {{backicon}} </view>
			<view class="title">工单统计<view class="year">2023</view>
			</view>
		</view>
		<!-- 数据统计 -->
		<view class="total">
			<view class="totalbox">
				<view class="totalItem">
					<view class="num">
						9
					</view>
					<view class="desc">
						处理中的工单
					</view>
				</view>
				<view class="totalItem">
					<view class="num">
						31
					</view>
					<view class="desc">
						新工单
					</view>
				</view>
				<view class="totalItem">
					<view class="num">
						17
					</view>
					<view class="desc">
						工单完成
					</view>
				</view>
				<view class="totalItem">
					<view class="num">
						24
					</view>
					<view class="desc">
						超时接单
					</view>
				</view>
			</view>
		</view>
		<!-- 工单状态 -->
		<view class="orderState">
			<p class="orderTitle">工单状态</p>
			<view class="chart1">
				<qiun-data-charts type="ring" :opts="data.opts1" :chartData="data.chartData1" />
			</view>
		</view>
		<view class="orderNum">
			<p class="orderTitle">工单数量(每月)</p>
			<view class="chart2">
				<qiun-data-charts type="bar" :opts="data.opts2" :chartData="data.chartData2" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from "vue";
	const backicon = '<'
	const data = reactive({
		chartData1: {
			series: [{
				data: [{
						"name": "待处理",
						"value": 50,
						"labelShow": false
					},
					{
						"name": "处理中",
						"value": 30,
						"labelShow": false
					},
					{
						"name": "待评价",
						"value": 20,
						"labelShow": false
					},
					{
						"name": "已处理",
						"value": 18
					}
				]
			}]
		},
		opts1: {
			rotate: false,
			rotateLock: false,
			color: ["#1890FF", "#FAC858", "#91CB74", "#3CA272"],
			padding: [0, 140, 0, 30],
			dataLabel: false,
			enableScroll: false,
			legend: {
				show: true,
				position: "right",
				lineHeight: 35,
				float: 'left'
			},
			title: {
				name: "",
				fontSize: 15,
				color: "#666666"
			},
			subtitle: {
				name: "",
				fontSize: 25,
				color: "#7cb5ec"
			},
			extra: {
				ring: {
					ringWidth: 20,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 0,
					border: false,
					borderWidth: 0,
					borderColor: "#FFFFFF"
				}
			}
		},
		chartData2: {
			categories: ["12月", "11月", "10月", "9月", "8月", "7月","6月","5月","4月","3月","2月","1月"],
			series: [{
					name: "进行中的工单",
					data: [35, 36, 31, 33, 13, 34,21,42,23,34,33,23]
				},
				{
					name: "新工单",
					data: [18, 27, 21, 24, 6, 28,11,23,4,13,21,2]
				},
				{
					name: "工单完成",
					data: [18, 27, 21, 24, 6, 28,22,23,25,13,21,12]
				},
				{
					name: "工单关闭",
					data: [18, 27, 21, 24, 6, 28,11,23,4,13,21,2]
				},
			]
		},
		opts2: {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
				"#ea7ccc"
			],
			padding: [15, 30, 0, 5],
			enableScroll: false,
			legend: {},
			xAxis: {
				boundaryGap: "justify",
				disableGrid: false,
				min: 0,
				axisLine: false,
				max: 100
			},
			yAxis: {
				max:300
			},
			extra: {
				bar: {
					type: "stack",
					width: 30,
					meterBorde: 1,
					meterFillColor: "#FFFFFF",
					activeBgColor: "#000000",
					activeBgOpacity: 0.08,
					categoryGap: 2
				}
			}
		}
	})

	const backHandle = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style scoped lang='less'>
	.workOrderStatistics {
		background-color: rgba(87, 185, 247, 1);
		height: 100vh;
	}

	/* 导航 */
	.goback {
		color: white;
	}

	.arrowleft,
	.title,
	.year {
		display: inline-block;
		line-height: 45px;
		color: white;
		vertical-align: middle;
	}

	.title {
		word-wrap: break-word;
		font-kerning: normal;
		width: calc(100% - 8%);
		text-align: center;
		font-weight: 700;
		font-size: 16px;
	}

	.arrowleft {
		font-size: 25px;
		margin-left: 5px;
		font-weight: 400;
		cursor: pointer;
	}

	.year {
		float: right;
		font-weight: 400;
	}

	/* 数据统计 */
	.total {
		height: 150px;
		display: flex;
		align-items: center;
	}

	.totalbox {
		width: 338px;
		height: 84px;
		margin: 0 auto;
		background-color: white;
		border-radius: 5px;
	}

	.totalItem,
	.line {
		text-align: center;
		display: inline-block;
	}

	.totalItem {
		width: 84px;
		font-weight: 400;
		line-height: 28px;
		font-size: 13px;
		margin-top: 5%;
		border-left: 1px solid #ddd;
	}

	.totalItem:first-child {
		border-left: 0;
	}

	.num {
		font-size: 24px;
		color: #4A73FF;
	}

	/* 工单状态 */
	.orderState {
		height: 300px;
		background-color: white;
	}

	.orderTitle {
		height: 45px;
		line-height: 45px;
		padding-left: 10px;
		color: #6B6E87;
		border: 1px solid rgba(226, 228, 231, 1);
		background-color: rgba(229, 233, 241, 1);
	}

	.chart1,
	.chart2 {
		height: calc(100% - 45px);
		background-color: rgba(244, 246, 249, 1);
	}
	.chart2{
		height: 500px;
	}
</style>